<template>
  <div class="btns">
    <div class="page btn page-prev" @click="prev"><img src="../assets/images/prev.png" alt=""></div>
    <div class="page btn page-next" @click="next"><img src="../assets/images/next.png" alt=""></div>
    <div class="exit btn" @click="exit"><img src="../assets/images/exit.png" alt=""></div>
  </div>
</template>

<script>
export default {
  name: 'ctrls',
  props: {
    pad: Boolean,
    pageInfo: Object
  },
  data () {
    return {
      autoslide: {},
      autoBak: {},
      deviceType: ''
    }
  },
  mounted: async function () {
    const that = this
    await that.getConfig()
    that.autoslide = that.$store.state.autoslide
    await that.pageChange()

    that.deviceType = that.$route.query.deviceType
    if (that.deviceType === 'tv') {
      that.timerApi = setInterval(async () => {
        await that.getConfig()
        const autobak = that.$store.state.autoslide
        // console.log('autobak', autobak)
        // console.log('that.pageTimer', that.pageTimer)
        if (autobak.curRouter === 'default') {
          if (that.pageTimer === null) {
            that.pageTimer = setInterval(() => {
              that.next()
            }, that.autoslide.time)
          }
        } else if (autobak.curRouter !== 'default' && autobak.curRouter !== that.$store.state.curRouter) {
          clearInterval(that.pageTimer)
          that.pageTimer = null
          // console.log('clearInterval', that.pageTimer)
          const jumpParams = {
            path: autobak.curRouter,
            query: {
              id: that.$route.query.id,
              deviceType: that.$route.query.deviceType,
              jumpId: that.$route.query.jumpId
            }
          }
          // that.$router.push(jumpParams)
          this.$emit('next', jumpParams)
        }
      }, 1000)
    }
  },
  components: {},
  methods: {
    async getConfig () {
      const that = this
      const params = {
        id: that.$route.query.id,
        'from': that.$route.query.deviceType,
        currentRouter: that.$store.state.curRouter
      }
      await that.$store.dispatch('getAutoSlide', params)
      // return res
    },
    pageChange () {
      const that = this
      const deviceType = that.$route.query.deviceType
      // console.log('d====', deviceType)
      // console.log('page:', that.pageTimer)
      if (deviceType === 'tv' && that.autoslide.time !== 0) {
        if (that.pageTimer === undefined) {
          that.pageTimer = setInterval(() => {
            that.next()
          }, that.autoslide.time)
        }
      }
    },
    prev () {
      const that = this
      let curRouter = that.$store.state.curRouter
      let curRouterIndex = 0
      that.autoslide.router.map((arr, index) => {
        if (arr.path === curRouter) {
          curRouterIndex = index
        }
      })
      let prevRouterIndex = curRouterIndex - 1 >= 0 ? curRouterIndex - 1 : that.autoslide.router.length - 1
      const id = this.$route.query.id || ''
      let jumpParams = {
        path: that.autoslide.router[prevRouterIndex].path,
        query: Object.assign({
          id,
          from: this.pad ? 'pad' : 'tv',
          curRouter: that.autoslide.router[prevRouterIndex].path
        }, that.autoslide.router[prevRouterIndex].query)
      }
      // this.$router.push(jumpParams)
      this.$emit('next', jumpParams)
      this.$store.dispatch('sendData', jumpParams)
    },
    next () {
      const that = this
      let curRouter = that.$store.state.curRouter
      let curRouterIndex = 0

      that.autoslide.router.map((arr, index) => {
        if (arr.path === curRouter) {
          curRouterIndex = index
        }
      })
      let nextRouterIndex = curRouterIndex + 1 < that.autoslide.router.length ? curRouterIndex + 1 : 0
      const id = this.$route.query.id || ''
      const jumpParams = {
        path: that.autoslide.router[nextRouterIndex].path,
        query: Object.assign({
          id,
          from: this.pad ? 'pad' : 'tv',
          curRouter: that.autoslide.router[nextRouterIndex].path
        }, that.autoslide.router[nextRouterIndex].query)
      }
      // this.$router.push(jumpParams)
      // console.log('that.autoslide.router', that.autoslide.router, curRouter, jumpParams)
      this.$emit('next', jumpParams)
      this.$store.dispatch('sendData', jumpParams)
    },
    async exit () {
      const that = this
      const params = {
        id: that.$route.query.id
      }
      await that.$store.dispatch('getExitUrl', params)
      window.location.href = that.$store.state.exitUrl
    }
  },
  beforeDestroy () {
    // console.log('before:')
    const that = this
    if (that.pageTimer !== undefined) {
      clearInterval(that.pageTimer)
    }
    if (that.timerApi !== undefined) {
      clearInterval(that.timerApi)
    }
    // console.log('hello destroyed')
  }
}
</script>

<style lang="scss" scoped>
  $sz: 96px;
  $side: 20px;
  .btn {
    z-index: 1001;
    position: fixed;
    width: $sz;
    height: $sz;
    vertical-align: middle;
    -webkit-border-radius: $sz/2;
    -moz-border-radius: $sz/2;
    border-radius: $sz/2;
    line-height: $sz;
    text-align: center;
    background-color: rgba(255, 255, 255, .2);
    img {
      position: absolute;
      margin-top: -24px;
      left: 50%;
      top: 50%;
    }
  }
  .page {
    top: 50%;
    margin-top: -$sz/2;
    &-next {
      right: $side;
      img {
        margin-left: -13px;
      }
    }
    &-prev {
      left: $side;
      img {
        margin-left: -13px;
      }
    }
  }
  .exit {
    left: 50%;
    margin-left: -$sz/2;
    bottom: $side;
    img {
      margin-left: -24px;
    }
  }
</style>
